<template>
    <div >
      <div v-for="item in resources" :key="item.id">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item  :title="item.name" name="2">
            <div >
              <el-row :gutter="10" >
                <el-col :span="6" v-for="ite in item.resourceList" :key="ite.id">
                  <a :href="ite.wurl">
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="ite.imgUrl" class="image">
                    <div style="padding: 14px;">
                      <span>{{ite.name}}</span>
                      <div class="bottom clearfix" >
                        <span>{{ite.synopsis}}</span>
                      </div>
                    </div>
                  </el-card>
                  </a>
                </el-col>
              </el-row>
            </div>

          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
</template>

<script>
  import {dataSource} from '../api/axiosRequest'
    export default {
        name: "",
        data(){
          return{
            activeNames: ['1','2','3'],
            // resource:[
            //   {
            //     classify:" 代码如诗",
            //     website:[
            //       {name:"GitHub",synopsis:"全球最大的代码社区",url:"https://github.com",
            //         img:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2829188657,3942243878&fm=26&gp=0.jpg"},
            //       {name:"CSDN",synopsis:"全球知名中文IT技术交流平台",url:"https://bbs.csdn.net/home",
            //         img:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3417623825,269538506&fm=26&gp=0.jpg"},
            //       {name:"w3cschool",synopsis:"编程学习入门及技术文档",url:"https://www.w3cschool.cn",
            //         img:"//7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png"},
            //       {name:"开源中国",synopsis:"中国最大的开源社区",url:"https://www.oschina.net/",
            //         img:"https://static.oschina.net/new-osc/img/logo_osc_new.svg"},
            //     ]
            //   },
            //   {
            //     classify:"开发工具",
            //     website:[
            //       {name:"GitHub",synopsis:"全球最大的代码社区",url:"https://github.com",
            //         img:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2829188657,3942243878&fm=26&gp=0.jpg"},
            //       {name:"CSDN",synopsis:"全球知名中文IT技术交流平台",url:"https://bbs.csdn.net/home",
            //         img:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3417623825,269538506&fm=26&gp=0.jpg"},
            //       {name:"w3cschool",synopsis:"编程学习入门及技术文档",url:"https://www.w3cschool.cn",
            //         img:"//7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png"},
            //       {name:"开源中国",synopsis:"中国最大的开源社区",url:"https://www.oschina.net/",
            //         img:"https://static.oschina.net/new-osc/img/logo_osc_new.svg"},
            //     ]
            //   },
            //   {
            //     classify:"技术博客",
            //     website:[
            //       {name:"GitHub",synopsis:"全球最大的代码社区",url:"https://github.com",
            //         img:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2829188657,3942243878&fm=26&gp=0.jpg"},
            //       {name:"CSDN",synopsis:"全球知名中文IT技术交流平台",url:"https://bbs.csdn.net/home",
            //         img:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3417623825,269538506&fm=26&gp=0.jpg"},
            //       {name:"w3cschool",synopsis:"编程学习入门及技术文档",url:"https://www.w3cschool.cn",
            //         img:"//7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png"},
            //       {name:"开源中国",synopsis:"中国最大的开源社区",url:"https://www.oschina.net/",
            //         img:"https://static.oschina.net/new-osc/img/logo_osc_new.svg"},
            //     ]
            //   },
            //   {
            //     classify:"前端技术栈",
            //     website:[
            //       {name:"GitHub",synopsis:"全球最大的代码社区",url:"https://github.com",
            //         img:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2829188657,3942243878&fm=26&gp=0.jpg"},
            //       {name:"CSDN",synopsis:"全球知名中文IT技术交流平台",url:"https://bbs.csdn.net/home",
            //         img:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3417623825,269538506&fm=26&gp=0.jpg"},
            //       {name:"w3cschool",synopsis:"编程学习入门及技术文档",url:"https://www.w3cschool.cn",
            //         img:"//7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png"},
            //       {name:"开源中国",synopsis:"中国最大的开源社区",url:"https://www.oschina.net/",
            //         img:"https://static.oschina.net/new-osc/img/logo_osc_new.svg"},
            //     ]
            //   },
            // ],
            resources:[]
          }
        },
      created() {
          this.resourceData()
      },
      methods: {
        handleChange(val) {
          console.log(val);
        },
        resourceData(){
          dataSource("/resource/findAll").then(res =>{
            this.resources = res.data.data
            console.log(res)
          })
        }
      }
    }
</script>

<style scoped lang="scss">
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 230px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";

  }

  .clearfix:after {
    clear: both;
  }
</style>
